<script setup lang="ts">
import { http } from '@/utlis/http.ts'

import { onMounted, ref } from 'vue'
// let Props = defineProps(['guessList', 'pageParam'])
// let prop=defineProps
// // 分页参数
// // 猜你喜欢的列表

const emits = defineEmits(['uploadVideo'])
const guessList = ref([
  {
    title:'白队45号普通犯规和黑队23号技术类取消比赛资格犯规',
    img:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-05%20230333.png',
    url:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E7%99%BD%E9%98%9F45%E5%8F%B7%E6%99%AE%E9%80%9A%E7%8A%AF%E8%A7%84%E5%92%8C%E9%BB%91%E9%98%9F23%E5%8F%B7%E6%8A%80%E6%9C%AF%E7%B1%BB%E5%8F%96%E6%B6%88%E6%AF%94%E8%B5%9B%E8%B5%84%E6%A0%BC%E7%8A%AF%E8%A7%84%EF%BC%9F%E7%AD%94%E6%A1%88%EF%BC%9A%E6%98%AF.mp4'
  },
  {
    title:'打架冲突中白队23号和黑队34号取消比赛',
    img:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-06%20000219.png',
    url:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E6%89%93%E6%9E%B6%E5%86%B2%E7%AA%81%E4%B8%AD%E7%99%BD%E9%98%9F23%E5%8F%B7%E5%92%8C%E9%BB%91%E9%98%9F34%E5%8F%B7%E5%8F%96%E6%B6%88%E6%AF%94%E8%B5%9B%E5%90%97%EF%BC%9F%E7%AD%94%E6%A1%88%EF%BC%9A%E6%98%AF.mp4'
  },
  
])

const toView = (url)=>{
  emits('uploadVideo',url)
}


</script>

<template>
  <!-- 猜你喜欢 -->
  <view class="m_box">
    <view class="caption">
      <text class="text">热门视频</text>
    </view>
    <view v-if="guessList" class="guess">
      <view class="comment_box" v-for="item in guessList" :key="item.id" @click="toView(item.url)"
       >

        <view class="box_img">
          <!-- #ifdef H5 -->
          <img  class="c_img" :src="item.img" mode="scaleToFill" />
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <img  class="c_img" :src="item.img" mode="scaleToFill" />
          <!-- #endif -->
        </view>

        <view class="c_text">
          {{ item.title }}
        </view>

        <!-- <view class="c_user">
          <view style="display: flex; align-items: center;flex-grow: 1;">
            <image :src="item.user_img" class="user_img" mode="scaleToFill" />
            <text class="user_name">{{ item.user_name }}</text>
          </view>
          <text class="user_date">{{ item.create_date }}</text>
        </view> -->

      </view>
    </view>
    <view class="loading-text">
      <!-- {{ pageParam.page_num >= pageParam.page_count ? '没有更多数据~' : '正在加载...' }} -->
    </view>
  </view>

</template>

<style lang="scss">
.m_box {
  margin: 0 3px;
  border-radius: 5px 5px 0 0;
  background-color: #fff;
}

:host {
  display: block;
}

.loading-text {
  text-align: center;
}

.guess {
  column-count: 2;
  column-gap: 1px;
  column-width: 325rpx;
  grid-column-start: span;

  .comment_box {

    height: auto;
    margin-top: 20rpx;
    margin: 7px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;

    .box_img {
      position: relative;
      min-height: 100px;
      max-height: 250px;
      overflow: hidden;
      width: 100%;
      margin-bottom: 5px;

      &::after {
        /* position: absolute;
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  bottom: 14rpx;
  right: 13rpx;
  content: '1/3';
  padding: 0px 2px; */
        /* border: 1px solid rgba(0, 0, 0, 1); */

      }

      .c_img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }

    .c_text {

      display: -webkit-box;

      margin: 5px;
      font-size: 11px;
      line-height: 14px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      color: rgba(0, 0, 0, 0.6);
      /*  */
      text-overflow: ellipsis;
      -webkit-line-clamp: 4;
      letter-spacing: 0.1em;
    }

    .c_user {
      width: 100%;

      display: flex;
      align-items: center;
      border-top: 0.5px solid rgba(0, 0, 0, 0.3);
      font-weight: 600;
      font-size: 9px;

      .user_img {
        margin: 5px;
        width: 30px;
        height: 30px;
        border-radius: 50%;

      }

      .user_name {
        font-size: 10px;
        padding-left: 3px;
        font-weight: 700;
      }

      .user_date {
        flex-grow: 1;
        text-align: right;
        font-weight: 500;
        margin: 9px;
        color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}

/* 分类标题 */
.caption {
  display: flex;
  justify-content: flex-start;
  line-height: 1;
  padding: 13px 0;
  margin-bottom: 5px;
  font-size: 32rpx;
  color: #262626;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);

  .text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 28rpx 0 0rpx;

    &::before{
      content: '';
      width: 20px;
      height: 20px;
      background-image: url(@/static/hot.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}


/* 猜你喜欢 */


page {
  background-color: #f7f7f7;
  height: 100%;

}
</style>